<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { getAdminList } from "@/api/getAdminList";
const tableData = ref([])
const dialogVisible = ref(false)
const imageUrl = ref('')
const CurrentPage = ref('')
const PageSize = ref('')
const Total = ref('')
const query = ref({
  pageNo: 1,
  pageSize: 10,
})

const getAdmins = () => {
  getAdminList(query.value).then((res) => {
    if (res.code === 0) {
      tableData.value = res.data.records
      Total.value = res.data.total
      CurrentPage.value = res.data.current
      PageSize.value = res.data.size
    } else {
      ElMessage.error(res.msg)
    }
  }).catch((error) => {
    console.error(error)
    ElMessage.error('获取管理员列表失败')
  })
}

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const showDialog = () => {
  dialogVisible.value = true
}
const PageSizeChange = (value) => {
  query.value.pageSize = value
  getAdmins()
}
const PageCurrentChange = (value) => {
  query.value.pageNo = value
  getAdmins()
}
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
getAdmins()
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>管理员列表</span>
        <el-row>
          <el-col :span="20"></el-col>
          <el-col style="text-align: right" :span="4">
            <el-button type="primary" @click="showDialog">添加</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="registerTime" label="注册日期" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="permGroupName" label="身份" />
        </el-table>
        <div class="demo-pagination-block">
          <div class="demonstration">页码</div>
          <el-pagination v-model:current-page="CurrentPage" v-model:page-size="PageSize" :page-sizes="[1, 2, 5, 10]"
            :size="size" :background="true" layout="total, sizes, prev, pager, next, jumper"
            @size-change="PageSizeChange" @current-change="PageCurrentChange" :total="Total" />
        </div>
      </div>
    </template>
  </el-card>

  <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
    <span>
      <el-form-item label="用户名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <br>
      <el-form-item label="用户身份">
        <el-input v-model="form.name" />
      </el-form-item>
      <br>
      <el-form-item label="注册时间">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="选择时间" style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%" />
        </el-col>
        <br>
        <el-form-item label="用户头像"></el-form-item>
        <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
